<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="icon" href="__FORJS__/images/favicon.ico">
    <link rel="stylesheet" href="__FORJS__/css/common/bootstrap.min.css"/>
    <link rel="stylesheet" href="__FORJS__/css/common/layout.css"/>
    <link rel="stylesheet" href="__FORJS__/css/common/icon.ali.css"/>
    <link rel="stylesheet" href="__FORJS__/css/common/modular.css"/>

    <script type="text/javascript" src="__FORJS__/js/common/jquery-1.9.1.min.js"></script>
    <script src="__FORJS__/js/common/bootstrap.min.js"></script>
    <script src="__FORJS__/js/common/bigwe_function.js"></script>
    <script type="text/javascript" src="__FORJS__/js/individual/image_upload.js"></script>
    <style>
        .header .pull-right {
            display: none!important;
        }
        .content {
            width: 1240px;
            margin: 30px auto 0;
            border: 1px solid #D9DADC;
            background: #fff;
        }
        .title, .contant_btn {
            padding: 15px;
            background: #F4F5F8;
        }
        #fm_img_upload {
            padding: 20px 30px;
        }
        #fm_img_upload > div {
            margin-bottom: 15px;
        }
        .prompt {
            color: red;
            position: relative;
            top: 3px;
            margin-right: 10px;
        }
        .txt_right_bor_null {
            width: 32%;
            padding: 5px 0 5px 5px;
            border-right: none!important;
            margin-left: 24px;
        }
        .spa_fontcount{
            padding: 5px 5px 6px;
            border:1px solid #D6D3CE;
            border-left:none;
            color:#B4B4B4;
            position: relative;
            left: -4px;
        }
        .video_classify, .select-tag {
            margin-left: 24px!important;
        }
        .tag-choose-style {
            display: inline-block;
            margin-left: 15px;
        }
        .tag-choose-style>div{
           display: inline-block;
        }
        .tag-choose-style button{
            text-align:left;
            background:#EFEEEC;
            border:1px solid #CDC9C4;
            min-width:85px;
            padding:5px 25px 5px 12px;
            margin-right:10px;
            position:relative;
        }
        .tag-choose-style>.system-tag>button{
            border-color:#2F9833!important;
            color:#2F9833!important;
            background:#fff;
        }
        .tag-choose-style>.system-tag>button:after{
            color:#2F9833!important;
        }
        .tag-choose-style button:after{
            content:'\2716';
            position:absolute;
            right:8px;
            top:5px;
            font-size:12px;
            color:#96928D;
        }
        .txt_tage {
            width: 90%;
            margin-left: 73px;
            padding: 5px;
        }

        .image_upload {
            margin-left: 73px;
            padding: 6px 12px;
        }
        .gray {
            margin-left: 25px;
        }
        .contant_btn {
            text-align: center;
        }
        .contant_btn > button {
            width: 100px;
        }
        .image_preview .add-show{
            width:260px;
            border:1px solid darkgray;
            padding:10px;
            position:relative;
            margin-left: 73px;
        }
        .image_preview .add-show img{
            width:100%;
        }
        .image_preview .add-show h3{
            margin-top:0;
        }
        .image_preview .add-show .delete{
            position:absolute;
            right:-42px;
            bottom:0;
            border:none;
            background:none;
            color:#32b3fd;
            cursor:pointer;
        }

        .picture_title {
            width: 1200px;
            margin: auto;
            padding: 30px 0;
        }

        .picture_list {
            width: 1240px;
            min-height: 300px;
            border: 1px solid #D9DADC;
            background: #fff;
            margin: 0 auto 60px;
            display: table;
        }

        .picture_list > div {
            width: 297px;
            height: 230px;
            float: left;
            margin: 10px 0 0 10px;
            position: relative;
            overflow: hidden;
        }

        .picture_list > div > img {
            width:297px;
        }

        .picture_list > div > p {
            width: 100%;
            text-align: right;
            padding: 9px 15px 0 0;
            position: absolute;
            bottom: 0;
            background: white;
        }

        .picture_list > div > p > span {
            cursor: pointer;
            color: #9c9c9c;
            font-size: 17px;
        }

        .picture_list > div > p > span:hover {
            color: black;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <include file="./Application/Home/View/Common/header.html"/>
        <div class="content" id="img-upload-modal">
            <h4 class="title">上传图片</h4>
            <form id="fm_img_upload">
                <div>
                    <span class="prompt">*</span>标题
                    <input type="text" placeholder="请输入图片名称" class="txt_right_bor_null" maxlength="21">
                    <span class="spa_fontcount">
                        <span>0</span>/21
                    </span>
                </div>
                <div>
                    <span class="prompt">*</span>分类
                    <select class="selectpicker video_classify" data-width="110px" data-size="7">
                        <option>未分类</option>
                        <option>风景名胜</option>
                        <option>房屋建筑</option>
                        <option>人物形象</option>
                        <option>动物植物</option>
                        <option>各类物品</option>
                        <option>交通运输</option>
                        <option>食品饮料</option>
                        <option>艺术藏品</option>
                        <option>金融保险</option>
                        <option>市井风情</option>
                        <option>电子数码</option>
                        <option>装潢装饰</option>
                        <option>文化教育</option>
                        <option>插画涂鸦</option>
                        <option>工业设计</option>
                        <option>室内设计</option>
                        <option>珠宝挂件</option>
                        <option>医药健康</option>
                        <option>地方特色</option>
                        <option>宗教信仰</option>
                        <option>科学科幻</option>
                        <option>购物晒图</option>
                        <option>符号标志</option>
                        <option>运动健身</option>
                        <option>背景纹理</option>
                        <option>旅游休闲</option>
                        <option>复古怀旧</option>
                        <option>抽象唯美</option>
                        <option>个性头像</option>
                        <option>节日活动</option>
                        <option>动态图片</option>
                        <option>幽默搞笑</option>
                        <option>文艺情怀</option>
                        <option>文字图片</option>
                        <option>表情符号</option>
                        <option>美容时尚</option>
                        <option>摄影美图</option>
                        <option>动漫动画</option>
                        <option>三维空间</option>
                        <option>服装设计</option>
                        <option>其他</option>
                    </select>
                </div>
                <div>
                    <span class="prompt">*</span>标签
                    <select class="selectpicker select-tag" data-width="110px" multiple="" data-size="7">
                        <option>美女</option>
                        <option>中国概念</option>
                        <option>古建筑</option>
                        <option>全景</option>
                        <option>文化遗产</option>
                        <option>河岸</option>
                        <option>儿童</option>
                        <option>民居</option>
                        <option>健康</option>
                        <option>女人</option>
                        <option>房屋</option>
                        <option>男人</option>
                        <option>瓷器</option>
                        <option>情侣</option>
                        <option>夏天</option>
                        <option>果蔬</option>
                        <option>室内环境</option>
                        <option>购物</option>
                        <option>荒郊野外</option>
                        <option>植物</option>
                        <option>旅行者</option>
                        <option>健身</option>
                        <option>商务</option>
                        <option>职员</option>
                        <option>家庭</option>
                        <option>生态足迹</option>
                        <option>运动</option>
                        <option>休闲</option>
                        <option>老人</option>
                        <option>静物</option>
                        <option>露齿微笑</option>
                        <option>地标</option>
                        <option>晴朗</option>
                        <option>俯视</option>
                        <option>动物</option>
                        <option>名胜古迹</option>
                        <option>季节</option>
                        <option>小孩</option>
                        <option>草地模糊</option>
                        <option>房产</option>
                        <option>搞笑</option>
                        <option>性感</option>
                        <option>欧美</option>
                        <option>唯美</option>
                        <option>伤感</option>
                        <option>明星</option>
                        <option>风景</option>
                        <option>动漫</option>
                        <option>动态</option>
                        <option>非主流</option>
                        <option>帅哥</option>
                        <option>背景</option>
                        <option>卡通</option>
                        <option>好看</option>
                        <option>生日快乐</option>
                        <option>可爱</option>
                        <option>文字</option>
                        <option>励志</option>
                        <option>小清新</option>
                        <option>猫咪</option>
                        <option>伤心</option>
                        <option>背影</option>
                        <option>圣诞节</option>
                        <option>古风</option>
                        <option>带字</option>
                        <option>霸气</option>
                        <option>微信</option>
                        <option>爱情</option>
                        <option>难过</option>
                        <option>婚纱</option>
                        <option>亲吻</option>
                        <option>黑白</option>
                        <option>闺蜜</option>
                        <option>节日</option>
                        <option>个性</option>
                        <option>墨迹</option>
                        <option>中国梦</option>
                        <option>背景墙</option>
                        <option>花纹边框</option>
                        <option>愚人节</option>
                        <option>换季</option>
                        <option>淘宝</option>
                        <option>十八大</option>
                        <option>新品上市</option>
                        <option>春季</option>
                        <option>核心价值观</option>
                        <option>艺术</option>
                        <option>科技</option>
                        <option>传统</option>
                        <option>建筑设计</option>
                        <option>商业</option>
                        <option>海报</option>
                    </select>
                    <div class="tag-choose-style tag-choosed-img">
                        <div class="system-tag"></div>
                        <div class="custom-tag"></div>
                    </div>
                </div>
                <div>
                    <input type="text" class="txt_tage" id="inp-addtag-img" placeholder="自定义标签最多添加4个，标签间可用空格隔开。">
                </div>
                <div>
                    <input type="file" class="hide" id="fileToUpload" accept="image/*" name="files">
                    <button type="button" class="btn-success image_upload" id="image_upload">上传图片</button>
                    <span class="gray">图片上传条件：大小不超过2M，支持：bmp、png、jpeg、jpg、gif</span>
                </div>
                <div class="image_preview"></div>
                <input type="hidden" id="imageId">
            </form>
            <div class="contant_btn">
                <button type="button" class="btn btn-success" id="upload_img">保存</button>
            </div>
        </div>
        <h4 class="picture_title">图片列表</h4>
        <div class="picture_list"></div>
    </div>
    <script type="text/javascript">
        var Qiniu_domain = '{$Qiniu_domain_img}',
        user_login = '{$Think.session.user_login}';
        $.ajax({
            type: 'post',
            url: '/upload_img/get_img_list',
            success: function (data) {
                var data = eval('('+data+')');
                var json = '';
                if (data.ret == 0) {
                    for (i in data.data) {
                        var art = data.data[i];
                        json += '<div><img src="'+art.image_url+'"><p><span class="glyphicon glyphicon-trash" img-id="'+art.id+'" delete-img></span></p></div>'
                    }
                    $('.picture_list').append(json)
                }
            }
        })
        $(document).on('click','[delete-img]',function () {
            var _this = $(this);
            var _id = _this.attr('img-id');
            $.ajax({
                type: 'post',
                url: '/upload_img/delete_img',
                data: {id: _id},
                success: function (data) {
                    if (eval('('+data+')').ret == 0) {
                        _this.parent().parent().remove();
                        ShowTitleMessage.show("删除成功！", showTime);
                    }
                }
            })
        })
        $('#upload_img').click(function() {
            var title = $.trim($('.txt_right_bor_null').val());
            var classify = $('.video_classify').val();
            var img_src = $('#example_image_qiniu img').prop('src');
            var image_id = $('#imageId').val();
            if (!title) {
                ShowTitleMessage.show("请输入图片标题", showTime);
                return;
            }

            if (classify == '未分类') {
                ShowTitleMessage.show("请先选择分类", showTime);
                return;
            }

            var label = '';
            $('.tag-choosed-img').find('button').each(function() {
                label += $(this).text() + ',';
            });
            label = label.substring(0, label.length - 1);
            if (!label) {
                ShowTitleMessage.show("请输入标签", showTime);
                return;
            }

            if (!image_id) {
                ShowTitleMessage.showWarning("请先上传一张图片", showTime);
                return;
            }

            ShowTitleMessage.show("正在保存");
            var paramData = {
                img_name: title,
                img_url: img_src,
                cgn: classify,
                tags: label
            };

            $.post('/UploadImg/save_img', paramData, function(json) {
                var json = $.parseJSON(json);
                if (typeof json.ret != 'undefined' && json.ret != 0) {
                    ShowTitleMessage.showWarning(Json.msg, showTime);
                    return;
                }
                
                ShowTitleMessage.show("上传首页图片成功！", showTime);
                $('.picture_list').append('<div><img src="'+img_src+'"><p><span class="glyphicon glyphicon-trash" img-id="'+json.data+'" delete-img></span></p></div>')
                $('#fm_img_upload')[0].reset();
            })
        });
    </script>
</body>
</html>